<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <style>
      @font-face {
        font-family: 'PingFang SC';
        src: url('../asstes/font/PingFang-SC-Light.ttf') format('truetype');
        font-weight: 400;
        font-display: swap;
      }
      body {
        font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        background: #121212;
        color: #fff;
        letter-spacing: 0.02em;
        margin: 0;
        padding: 0;
      }
      /* 主卡片：更现代更有呼吸感 */
      .main-card.primary {
        border-radius: 1.5rem;
        box-shadow: 0 10px 36px #00F2EA33, 0 2px 0 #232323 inset, 0 0 0 2px #00F2EA inset;
        margin-bottom: 2.2rem;
        padding: 2.2rem 1.5rem 1.5rem 1.5rem;
        border: 2px solid #00F2EA;
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(0,242,234,0.10) 0%, rgba(35,39,47,0.98) 70%, rgba(254,44,85,0.10) 100%);
        backdrop-filter: blur(2px);
        transition: box-shadow 0.18s, border-color 0.18s;
      }
      .main-card.primary:hover {
        box-shadow: 0 16px 48px #00F2EA55, 0 2px 0 #232323 inset, 0 0 0 2.5px #FE2C55 inset;
        border-color: #FE2C55;
      }
      .main-card.primary::before {
        content: '';
        display: block;
        position: absolute;
        left: 0; top: 0; right: 0; height: 7px;
        background: linear-gradient(90deg, #00F2EA 0%, #FE2C55 100%);
        border-radius: 1.5rem 1.5rem 0 0;
        opacity: 0.95;
        z-index: 2;
      }
      .main-card.primary::after {
        content: '';
        display: block;
        position: absolute;
        left: 18px; right: 18px; top: 13px; height: 3px;
        background: linear-gradient(90deg, #fff8 0%, #fff0 100%);
        border-radius: 1.5rem;
        opacity: 0.18;
        z-index: 2;
      }
      /* 次卡片：更柔和 */
      .main-card.secondary {
        border-radius: 1rem;
        box-shadow: 0 2px 12px #0007, 0 1.5px 0 #232323 inset;
        margin-bottom: 1.5rem;
        padding: 1.25rem 1rem 1rem 1rem;
        border: 1.5px solid #232323;
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, rgba(35,39,47,0.92) 60%, rgba(24,26,32,0.88) 100%);
      }
      .main-card.secondary::before {
        content: '';
        display: block;
        position: absolute;
        left: 0; top: 0; right: 0; height: 4px;
        background: linear-gradient(90deg, #00F2EA 0%, #FE2C55 100%);
        border-radius: 1rem 1rem 0 0;
        opacity: 0.5;
        z-index: 2;
      }
      .main-card.secondary::after {
        content: '';
        display: block;
        position: absolute;
        left: 10px; right: 10px; top: 7px; height: 2px;
        background: linear-gradient(90deg, #fff2 0%, #fff0 100%);
        border-radius: 1rem;
        opacity: 0.10;
        z-index: 2;
      }
      .card-list {
        scrollbar-width: thin;
        scrollbar-color: #232323 #181A20;
      }
      .message-swiper {
        height: 1.8em;
        overflow: hidden;
        position: relative;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/@vant/weapp/dist/index.min.js"></script>
  </head>
  <body class="min-h-screen">
    <div class="max-w-md mx-auto py-10 px-4">
      <div class="main-card primary flex justify-between items-center mb-8">
        <div>
          <div
            class="main-title text-2xl font-bold text-pink-500 mb-2 tracking-wide"
          >
            欢迎，仓禾家人！
          </div>
          <div class="main-desc text-gray-200 text-base">
            今日菜单已开放点菜，快来选你喜欢的菜吧～
          </div>
        </div>
        <img
          src="https://cdn.pixabay.com/photo/2016/03/05/19/02/salad-1238248_1280.jpg"
          alt="今日菜单"
          class="w-20 h-20 object-cover rounded-2xl shadow-lg ml-4"
        />
      </div>
      <div
        class="notice-bar mb-6 bg-gray-900 text-cyan-400 rounded-xl px-4 py-2 flex items-center shadow"
      >
        <i class="fa fa-bullhorn mr-2"></i>本周六有家庭聚餐，欢迎大家提前点菜！
      </div>
      <div class="main-card secondary mb-8">
        <div class="flex justify-between items-center mb-4">
          <div
            class="section-title text-pink-500 text-lg font-semibold flex items-center tracking-wide"
          >
            <i class="fa fa-utensils mr-2 text-pink-500 text-lg"></i>今日菜单
          </div>
          <a
            href="menu.html"
            class="theme-link text-base text-cyan-400 underline font-semibold hover:text-pink-500 transition-colors"
            >去点菜</a
          >
        </div>
        <div class="card-list flex gap-3 overflow-x-auto pb-1">
          <div
            class="food-card w-28 rounded-xl shadow-md flex flex-col items-center relative border border-gray-800 transition-shadow duration-150 bg-gradient-to-br from-gray-800 to-gray-700 px-2 py-2 hover:shadow-xl"
          >
            <img
              src="https://cdn.pixabay.com/photo/2017/05/07/08/56/food-2290814_1280.jpg"
              alt="红烧肉"
              class="food-img w-12 h-12 rounded-full object-cover border-2 border-cyan-400 mb-1 bg-gray-900 shadow"
            />
            <div
              class="food-name text-white font-semibold text-base mb-1 tracking-wide"
            >
              红烧肉
            </div>
            <span
              class="food-count bg-gray-800 text-pink-500 text-xs font-bold rounded-full px-2 py-0.5 absolute top-2 right-2 shadow"
              >3份</span
            >
          </div>
          <div
            class="food-card w-28 rounded-xl shadow-md flex flex-col items-center relative border border-gray-800 transition-shadow duration-150 bg-gradient-to-br from-gray-800 to-gray-700 px-2 py-2 hover:shadow-xl"
          >
            <img
              src="https://cdn.pixabay.com/photo/2016/03/05/19/02/salad-1238248_1280.jpg"
              alt="清炒时蔬"
              class="food-img w-12 h-12 rounded-full object-cover border-2 border-cyan-400 mb-1 bg-gray-900 shadow"
            />
            <div
              class="food-name text-white font-semibold text-base mb-1 tracking-wide"
            >
              清炒时蔬
            </div>
            <span
              class="food-count bg-gray-800 text-pink-500 text-xs font-bold rounded-full px-2 py-0.5 absolute top-2 right-2 shadow"
              >2份</span
            >
          </div>
        </div>
      </div>
      <div class="main-card secondary">
        <div
          class="section-title text-pink-500 text-lg font-semibold flex items-center mb-3 tracking-wide"
        >
          <i class="fa fa-comment-dots mr-2 text-pink-500 text-lg"></i>家庭留言
        </div>
        <div class="message-swiper">
          <div id="message-list" style="transition: transform 0.5s;">
            <div class="main-desc text-gray-200 text-base">
              爸爸：明天能不能加个鱼香肉丝？
            </div>
            <div class="main-desc text-gray-200 text-base">
              妈妈：明天多做点青菜！
            </div>
            <div class="main-desc text-gray-200 text-base">
              姐姐：我想吃糖醋里脊！
            </div>
            <div class="main-desc text-gray-200 text-base">
              爷爷：少放点辣椒哈～
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      // 简单JS实现留言上下轮播
      const messages = Array.from(document.querySelectorAll('#message-list .main-desc'));
      let idx = 0;
      setInterval(() => {
        idx = (idx + 1) % messages.length;
        document.getElementById('message-list').style.transform = `translateY(-${idx * 1.8}em)`;
      }, 2200);
    </script>
  </body>
</html>
